<template>
	<div class="page-container">
		<h1>MD5加密工具</h1>
		<el-form :model="form" label-position="top">
			<el-form-item label="明文">
				<el-input v-model.trim="form.plaintext" placeholder="请输入要加密的明文"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="encrypt">加密</el-button>
			</el-form-item>
		</el-form>
		<el-form label-position="top">
			<el-form-item label="32位大写">
				<el-input v-model="encryptedTextUpperCase"></el-input>
			</el-form-item>
			<el-form-item label="32位小写">
				<el-input v-model="encryptedTextLowerCase"></el-input>
			</el-form-item>
			<el-form-item label="16位大写">
				<el-input v-model="encryptedTextUpper16"></el-input>
			</el-form-item>
			<el-form-item label="16位小写">
				<el-input v-model="encryptedTextLower16"></el-input>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	import CryptoJS from 'crypto-js';

	export default {
		data() {
			return {
				form: {
					plaintext: '',
				},
				encryptedTextUpperCase: '',
				encryptedTextLowerCase: '',
				encryptedTextUpper16: '',
				encryptedTextLower16: '',
			};
		},
		methods: {
			encrypt() {
				const plaintext = this.form.plaintext;
				if (!plaintext) {
					this.$message.error('明文不能为空！');
					return;
				}
				const encrypted = CryptoJS.MD5(plaintext).toString();
				this.encryptedTextUpperCase = encrypted.toUpperCase();
				this.encryptedTextLowerCase = encrypted.toLowerCase();
				this.encryptedTextUpper16 = encrypted.substr(8, 16).toUpperCase();
				this.encryptedTextLower16 = encrypted.substr(8, 16).toLowerCase();
			},
		},
	};
</script>


